<template>
	<div class="gameIntoConversion" :style="{width:realTimeServiceContent}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置/实时数据/<span>{{title}}</span>
			</div>
		</div>
		<div class="choose_dialog fadeInDown animated">
				<div class="block">
					<el-form  class="demo-form-inline" :inline="true">
						<el-form-item label="查看日期：" :label-width="formLabelWidth">
							<el-date-picker
							v-model="date"
							align="left"
							placeholder="选择日期"
							@change='dateChange' 
							:picker-options="pickerOptions">
							</el-date-picker>
						</el-form-item>
						<el-form-item  class='conmit'>
							<el-button type="primary"  icon="search" @click="search()" :disabled="searchable">查询</el-button>
			    		</el-form-item>
			    		<el-form-item>
							<span>（只能查看最近30天数据）数据更新频率为1分钟,更新时间最近更新时间为：{{nowDate}}</span>
			    		</el-form-item>
					</el-form>
				</div>
			</div>
		<div class="right_content">
			<div class="realTimeServiceTable">
				<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated" @click='ifTableShow1'>
						分平台实时账号留存
						<i style='cursor:pointer;' :class="{'el-icon-caret-bottom':!TableShow1,'el-icon-caret-top':TableShow1}" title='点击查看分小时详细数据'></i>
					</span>
						<!-- 点击查看分小时详细数据 -->
					<el-button type="primary" size="mini" class="excel"  @click="excel(platListTabelHead,platLists,'实时数据-分时留存-分平台实时账号留存')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i> 导出excel
					</el-button>
				</div>
				<div class="realTimeServiceTableBody fadeIn animated" v-show="TableShow1">
					<template>
					  <el-table
						v-loading="loading"
						element-loading-text="拼命加载中"
					    :data="platLists"
					    border
					    :style="{width:realTimeServiceTableWidth}"
					    :default-sort = "{prop: 'channelid', order: 'descending'}"
					    >
					    <el-table-column  align="center" label="平台" fixed width='120px'>
					        <el-table-column  align="center" prop='0' :label="searchDate" width='120px'>
						    </el-table-column>
					    </el-table-column>
					    <tabelHead></tabelHead>
					  </el-table>
					</template>
				</div>
			</div>

			<div class="realTimeServiceTable">
				<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated" @click='ifTableShow2'>
						分渠道实时账号留存
						<i style='cursor:pointer;' :class="{'el-icon-caret-bottom':!TableShow2,'el-icon-caret-top':TableShow2}" title='点击查看分小时详细数据'></i>
					</span>
						<!-- 点击查看分小时详细数据 -->
					<el-button type="primary" size="mini" class="excel"  @click="excel(platListTabelHead,chanLists,'实时数据-分时留存-分渠道实时账号留存')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i> 导出excel
					</el-button>
				</div>
				<div class="realTimeServiceTableBody fadeIn animated" v-show="TableShow2">
					<template>
					  <el-table
						v-loading="loading" 
						element-loading-text="拼命加载中"
					    :data="chanLists1"
					    border
					    :style="{width:realTimeServiceTableWidth}"
					    :default-sort = "{prop: 'channelid', order: 'descending'}"
						@sort-change="sortChange"
					    >
					    <el-table-column  align="center" label="渠道" fixed width='120px'>
					        <el-table-column  align="center" prop='0' :label="searchDate" width='120px'>
						    </el-table-column>
					    </el-table-column>
					    <tabelHead></tabelHead>
					  </el-table>
					</template>
				</div>
				<div class="block realTimeServicePage">
					<el-pagination
					@size-change="handleSizeChange1"
					@current-change="handleCurrentChange1"
					:current-page="currentPage1"
					:page-sizes="pageSizes1"
					:page-size="pageSize1"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataTotal1"></el-pagination>
				</div>
			</div>

			<div class="realTimeServiceTable">
				<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated" @click='ifTableShow3'>
						分区服实时账号留存
						<i style='cursor:pointer;' :class="{'el-icon-caret-bottom':!TableShow3,'el-icon-caret-top':TableShow3}" title='点击查看分小时详细数据'></i>
					</span>
						<!-- 点击查看分小时详细数据 -->
					<el-button type="primary" size="mini" class="excel"  @click="excel(platListTabelHead,servLists,'实时数据-分时留存-分区服实时账号留存')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i> 导出excel
					</el-button>
				</div>
				<div class="realTimeServiceTableBody fadeIn animated" v-show="TableShow3">
					<template>
					  <el-table
						v-loading="loading" 
						element-loading-text="拼命加载中"
					    :data="servLists1"
					    border
					    :style="{width:realTimeServiceTableWidth}"
					    :default-sort = "{prop: 'channelid', order: 'descending'}"
						@sort-change="sortChange2"
					    >
					    <el-table-column  align="center" label="区服" fixed width='120px'>
					        <el-table-column  align="center" prop='0' :label="searchDate" width='120px'>
						    </el-table-column>
					    </el-table-column>
					    <tabelHead></tabelHead>
					  </el-table>
					</template>
				</div>
				<div class="block realTimeServicePage">
					<el-pagination
					@size-change="handleSizeChange2"
					@current-change="handleCurrentChange2"
					:current-page="currentPage2"
					:page-sizes="pageSizes2"
					:page-size="pageSize2"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataTotal2"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./gameIntoConversion.styl"></style>
<script src="./gameIntoConversion.js"></script>
